<template>
  <div class="tags-box">
    <span class="page-title">
      {{ crumbs }}
      <b>|</b>
    </span>
    <el-tag
      v-for="(item, index) in tags"
      :key="index"
      closable
      :type="item.type"
      class="tags-box"
    >
      {{ item.name }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "DicTags",
  props: {
    crumbs: {
      type: String,
      default() {
        return "";
      },
    },
    tags: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.page-title {
  display: inline-block;
  padding: 15px 20px;
  position: relative;
  font-size: 16px;
  text-align: left;
}
.page-title b {
  position: absolute;
  right: 6px;
  color: #cdd1d1;
  font-size: 16px;
}
.el-tag--light {
  background-color: #0052d9;
  color: #fff !important;
  font-size: 16px;
  border-radius: 4px;
}

.el-tag--light .el-tag .el-icon-close {
  color: #fff !important;
}
.el-tag--light .el-tag .el-icon-close:before {
  color: #fff;
}
</style>
